<template>
  <div class="container">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/enterpriseSet/enterpriseDetail' }">企业信息</el-breadcrumb-item>
            <el-breadcrumb-item>编辑企业信息</el-breadcrumb-item>
        </el-breadcrumb> -->
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="resetForm"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位类型" prop="scale">
              <el-select
                v-model.trim="ruleForm.departmentType"
                clearable
                filterable
                placeholder="请选择"
                :disabled="true"
              >
                <el-option label="企业" value="0"></el-option>
                <el-option label="事业单位" value="5"></el-option>
                <el-option label="其他" value="10"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业">
              <el-input
                class="inputStyle"
                :disabled="true"
                v-model.trim="enterpriseData.industryName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称">
              <el-input
                class="inputStyle"
                :disabled="true"
                v-model.trim="enterpriseData.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码">
              <el-input
                class="inputStyle"
                :disabled="true"
                v-model.trim="enterpriseData.uscc"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="7" class="labelStyMin">
              <el-form-item label="注册登记地区">
                <el-input
                  :disabled="true"
                  v-model.trim="enterpriseData.enterpriseBelongs"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="labelStyMax">
              <el-form-item label="企业注册地址">
                <el-input
                  :disabled="true"
                  v-model.trim="enterpriseData.regAreaName"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营地区">
              <el-input
                :disabled="true"
                class="inputStyle"
                v-model.trim="enterpriseData.bizAreaName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="ruleForm.departmentType == '0'">
          <el-col :span="12">
            <el-col :span="7" class="labelStyMin">
              <el-form-item label="法人姓名" prop="legalName">
                <el-input
                  :disabled="false"
                  v-model.trim="ruleForm.legalName"
                  clearable
                  @blur="ruleForm.legalName = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="labelStyMax">
              <el-form-item label="法人联系方式" prop="legalPhoneNumber">
                <el-input
                  :disabled="false"
                  v-model.trim="ruleForm.legalPhoneNumber"
                  clearable
                  @blur="ruleForm.legalPhoneNumber = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证号" prop="numberId">
              <el-input
                :disabled="false"
                class="inputStyle"
                v-model.trim="ruleForm.numberId"
                clearable
                @blur="ruleForm.numberId = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="7" class="labelStyMin">
              <el-form-item label="联系人姓名" prop="transactor">
                <el-input
                  :disabled="false"
                  v-model.trim="ruleForm.transactor"
                  clearable
                  @blur="ruleForm.transactor = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="labelStyMax">
              <el-form-item label="联系方式" prop="phoneNumber">
                <el-input
                  :disabled="false"
                  v-model.trim="ruleForm.phoneNumber"
                  clearable
                  @blur="ruleForm.phoneNumber = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="7" class="labelStyMin">
              <el-form-item label="座机号码" prop="landlineTelHead">
                <el-input
                  :disabled="false"
                  v-model.trim="ruleForm.landlineTelHead"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="labelStyMax">
              <el-form-item label=" " prop="landlineTelNum">
                <el-input
                  :disabled="false"
                  v-model.trim="ruleForm.landlineTelNum"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系邮箱" prop="email">
              <el-input
                :disabled="false"
                class="inputStyle"
                v-model.trim="ruleForm.email"
                clearable
                @blur="ruleForm.email = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本地详细办公地址">
              <el-input
                :disabled="false"
                class="inputStyle"
                placeholder="请输入"
                v-model.trim="enterpriseData.officeAddress"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="认证资料">
              <ul class="clearfix" v-if="enterpriseData.departmentType == '0'">
                <li
                  class="fl picBox"
                  v-for="(item, i) of enterpriseData.fileExpandVOs"
                  :key="i"
                >
                  <div class="picStyle">
                    <!-- <img :src="item.url" alt="" class = "imgStyle"> -->
                    <el-image
                      class="imgStyle"
                      :src="item.url"
                      :preview-src-list="srcList"
                      @click="enlargeImg(i)"
                    >
                    </el-image>
                  </div>
                  <p v-if="i == 0" class="picTipStyle">营业执照</p>
                  <p v-if="i == 1" class="picTipStyle">法人身份证正面</p>
                  <p v-if="i == 2" class="picTipStyle">法人身份证反面</p>
                </li>
              </ul>
              <ul class="clearfix" v-else>
                <li
                  class="fl picBox"
                  v-for="(item, i) of enterpriseData.fileExpandVOs"
                  :key="i"
                >
                  <div class="picStyle" v-if="i == 0">
                    <!-- <img :src="item.url" alt="" class = "imgStyle"> -->
                    <el-image
                      class="imgStyle"
                      :src="item.url"
                      :preview-src-list="srcList"
                      @click="enlargeImg(i)"
                    >
                    </el-image>
                  </div>
                  <p v-if="i == 0" class="picTipStyle">单位登记证书</p>
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="submitBox">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            v-show="isShowUpdate"
            class="commonBut saveBtn"
            :loading="saveLoading"
            >保存</el-button
          >
          <el-button @click="resetForm" class="commonBut">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'enterpriseInfo',

  data() {
    var enterpriseName = (rule, value, callback) => {
      if (value === null) {
        value = 0
      } else {
        value = value.replace(/\s+/g, '')
      }
      if (value !== '' || value != 0) {
        if (value.length < 2 || value.length > 20) {
          callback(new Error('请输入正确的姓名'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      titleText: '企业信息',
      ruleForm: {
        salaryDay: '',
        numberId: '', //验证身份证号
        phoneNumber: '', //验证手机号
        legalPhoneNumber: '', //法人验证手机号
        legalName: '', //法人名称
        landlineTelHead: '',
        landlineTelNum: '',
        transactor: '',
        email: '',
        departmentType: '',
      },
      rules: {
        salaryDay: [
          { required: true, message: '请选择工资发放日', trigger: 'blur' },
        ],
        numberId: [
          {
            pattern:
              /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
        phoneNumber: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        legalPhoneNumber: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        legalName: [
          {
            trigger: 'blur',
            validator: enterpriseName,
          },
        ],
        transactor: [
          {
            trigger: 'blur',
            validator: enterpriseName,
          },
        ],
        email: [
          {
            pattern: /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/,
            message: '请输入正确的邮箱地址',
            trigger: 'blur',
          },
        ],
        landlineTelHead: [
          {
            pattern: /^(0\d{2,3})$/,
            message: '请输入正确的座机号',
            trigger: 'blur',
          },
        ],
        landlineTelNum: [
          {
            pattern: /^\d{7,8}$/,
            message: '请输入正确的座机号',
            trigger: 'blur',
          },
        ],
      },
      //   isShowSubmit: false, //是显示保存按钮还是显示编辑
      false: true, //进入查看不可编辑，点击编辑-可编辑
      enterpriseData: '', //企业信息
      enterpriseScale: [
        //   {    //企业规模
        //   value: '01',
        //   label: '1-50人'
        // }, {
        //   value: '02',
        //   label: '51-100人'
        // }, {
        //   value: '03',
        //   label: '101-200人'
        // }, {
        //   value: '04',
        //   label: '201-500人'
        // }, {
        //   value: '05',
        //   label: '501-1000人'
        // }
        // , {
        //   value: '06',
        //   label: '1000人以上'
        // }
      ],
      scaleValue: '', //企业规模
      srcList: [],
      oldSrcList: [],
      back: true,
      saveLoading: false,
      id: '',
      isShowUpdate: '',
    }
  },
  mounted() {},
  computed: {},
  created() {
    this.getEnterpriseInfo()
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('companyMaintain:update') >
        -1 ||
      this.$store.state.buttonLimitsArr.indexOf('companyInfo:update') > -1
    // 获取企业规模
    this.getScaleSelct()
  },
  methods: {
    //   编辑
    // editInfo() {
    //   this.false = false;
    //   this.isShowSubmit = true;
    // },
    // 取消
    resetForm() {
      this.$router.push('/home/enterpriseSet/enterpriseDetail')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enterpriseSet/enterpriseDetail',
        newUrl: this.$router.currentRoute.fullPath,
      })

      // this.$refs[formName].resetFields();
      // this.isShowSubmit = false;
    },
    // 获取企业信息
    getEnterpriseInfo() {
      this.saveLoading = true
      this.axios({
        method: 'post',
        url: 'api-c/company/expand/companies',
        data: {
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((res) => {
          this.saveLoading = false
          this.enterpriseData = res.data.result
          this.ruleForm.legalName = this.enterpriseData.boss //法人姓名
          this.ruleForm.legalPhoneNumber = this.enterpriseData.bossTel //法人联系方式
          this.ruleForm.numberId = this.enterpriseData.bossIdcard //法人身份证号
          this.ruleForm.phoneNumber = this.enterpriseData.transactorTel // 企业联系电话
          this.ruleForm.salaryDay = this.enterpriseData.salaryDay // 工资发放日
          this.scaleValue = this.enterpriseData.scale //企业规模
          this.ruleForm.landlineTelHead = this.enterpriseData.landlineTelHead
          this.ruleForm.landlineTelNum = this.enterpriseData.landlineTelNum
          this.ruleForm.transactor = this.enterpriseData.transactor
          this.ruleForm.email = this.enterpriseData.email
          this.ruleForm.departmentType = this.enterpriseData.departmentType + ''
          var len = this.enterpriseData.fileExpandVOs.length
          for (var i = 0; i < len; i++) {
            this.srcList.push(this.enterpriseData.fileExpandVOs[i].url)
            this.oldSrcList.push(this.enterpriseData.fileExpandVOs[i].url)
          }
        })
        .catch((error) => {
          this.saveLoading = false
        })
    },
    enlargeImg(index) {
      this.srcList = this.oldSrcList
      var demo = this.srcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.srcList = list
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            (this.ruleForm.landlineTelHead &&
              (this.ruleForm.landlineTelNum == '' ||
                this.ruleForm.landlineTelNum == null)) ||
            (this.ruleForm.landlineTelNum &&
              (this.ruleForm.landlineTelHead == '' ||
                this.ruleForm.landlineTelHead == null))
          ) {
            this.$message({
              type: 'error',
              message: '请填写完整的座机号码',
            })
            this.saveLoading = false
            return false
          }
          if (
            this.ruleForm.landlineTelHead == null ||
            this.ruleForm.landlineTelNum == null
          ) {
            this.ruleForm.landlineTelHead = ''
            this.ruleForm.landlineTelNum = ''
          }
          this.saveLoading = true
          this.axios({
            method: 'post',
            url: 'api-c/company/expand/companies/edit',
            data: {
              id: this.enterpriseData.id,
              scale: this.scaleValue,
              boss: this.ruleForm.legalName,
              bossTel: this.ruleForm.legalPhoneNumber,
              bossIdcard: this.ruleForm.numberId,
              transactor: this.ruleForm.transactor,
              transactorTel: this.ruleForm.phoneNumber,
              landlineTel:
                this.ruleForm.landlineTelHead +
                '-' +
                this.ruleForm.landlineTelNum,
              landlineTelHead: this.ruleForm.landlineTelHead,
              landlineTelNum: this.ruleForm.landlineTelNum,
              email: this.ruleForm.email,
              salaryDay: this.ruleForm.salaryDay,
              officeAddress: this.enterpriseData.officeAddress,
            },
          })
            .then((res) => {
              this.saveLoading = false
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                // this.getEnterpriseInfo();
                this.$router.push('/home/enterpriseSet/enterpriseDetail')
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/enterpriseSet/enterpriseInfo',
                  newUrl: this.$router.currentRoute.fullPath,
                })

                this.false = true
                // this.isShowSubmit = false;
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {
              this.saveLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 获取企业规模
    getScaleSelct() {
      let vm = this
      vm.axios({
        method: 'post',
        url: '/api-bs/base/dicitem/typeorname',
        data: {
          dicitemType: 'ENTERPRISE_SCALE',
        },
      })
        .then(
          (res) => {
            //验证码失败
            if (!res.data.hasError) {
              this.enterpriseScale = res.data.result
            } else {
              this.$message({
                showClose: true,
                duration: 1000,
                message: '获取企业规模失败',
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              showClose: true,
              duration: 1000,
              message: '获取企业规模失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;
    .labelStyMin {
      padding-left: 0px !important;
      min-width: 130px;
    }
    .labelStyMax {
      padding-left: 0px !important;
      margin-left: 5px;
      min-width: 155px;
    }
    .submitBox {
      text-align: center;
      margin-top: 40px;
    }
    .picBox {
      margin-right: 60px;
      .picStyle {
        width: 116px;
        height: 116px;
        .imgStyle {
          width: 100%;
          height: 100%;
        }
      }
      .picTipStyle {
        text-align: center;
      }
    }

    /deep/ .el-row {
      margin-left: 10% !important;
    }
  }

  .el-row {
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .bg-purple {
    background: #d3dce6;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
  .inputStyle {
    width: 70%;
    min-width: 280px;
    height: 36px;
  }
  .el-form-item {
    margin-bottom: 0px !important;
  }
  /deep/ .el-form-item__label {
    float: inherit !important;
  }
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }

  .el-button--primary {
    background-color: #009588;
    border-color: #009588;
  }
  .el-select {
    width: 70% !important;
  }
}
</style>
